<template>
  <div class="user">
    <el-dialog title="新增用户" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <!-- 用户信息 -->
      <el-form :inline="true" :rules="rules" ref="form" :model="form" label-width="80px">
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入你的名字"></el-input>
        </el-form-item>
        <!-- 年龄 -->
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入你的年龄 "></el-input>
        </el-form-item>
        <!-- 性别 -->
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择你的性别">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- 出生日期 -->
        <el-form-item label="出生日期" prop="birth">
          <div class="block">
            <el-date-picker value-format="yyyy-MM-DD" v-model="form.birth" type="date" placeholder="请选择你的出生日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <!-- 地址 -->
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入你的现居地址"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <div class="manage-header">
      <!-- 新增按钮 -->
      <el-button @click="handleAdd" type="primary">
        + 新增
      </el-button>
      <!-- 搜索 -->
      <el-form :inline="true" :model="userForm">
        <el-form-item>
          <el-input placeholder="请输入名称" @input="onChage($event)" v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="common-tabel">
      <el-table :data="tableData" style="width: 100%;" height='79.8%'>
        <!-- 姓名 -->
        <el-table-column prop="name" label="姓名" width="180" />
        <!-- 年龄 -->
        <el-table-column prop="age" label="年龄" width="180" />
        <!-- 性别 -->
        <el-table-column prop="sex" label="性别" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.sex == '1' ? '男' : '女' }}</span>
          </template>
        </el-table-column>
        <!-- 出生日期 -->
        <el-table-column prop="birth" label="出生日期" width="180" />
        <!-- 现居地址 -->
        <el-table-column prop="addr" label="现居地址" />
        <!-- 功能 -->
        <el-table-column prop="addr" label="功能">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager">
      <el-pagination layout="prev, pager, next" :total="total" @current-change="handlePage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getUser, addUser, editUser, delUser } from '../api'
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名' }
        ],
        age: [
          { required: true, message: '请输入年龄' }
        ],
        sex: [
          { required: true, message: '请选择性别' }
        ],
        birth: [
          { required: true, message: '请选择出生日期' }
        ],
        addr: [
          { required: true, message: '请输入居住地址' }
        ],
      },
      tableData: [],
      modalTYpe: 0,
      total: 0,
      pageData: {
        page: 1,
        limit: 10
      },
      userForm: {
        name: ''
      }
    }
  },
  methods: {
    // 提交用户数据
    submit() {
      this.$refs.form.validate((valid) => {
        // console.log(valid);
        if (valid) {
          console.log(this.form);
          if (this.modalTYpe === 0) {
            addUser(this.form).then(() => {
              // 重新获取列表的接口
              this.getList();
            })
          } else {
            editUser(this.form).then(() => {
              // 重新获取列表的接口
              this.getList();
            })
          }
          // 清空表单的数据
          console.log(this.$refs.form);
          this.$refs.form.resetFields();

          // 关闭弹窗
          this.dialogVisible = false;
        }
      })

    },
    handleClose() {
      // console.log(1111);
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    cancel() {
      // 清空表单的数据
      this.$refs.form.resetFields();
      this.handleClose();
    },
    handleAdd() {
      this.modalTYpe = 0;
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.modalTYpe = 1;
      this.dialogVisible = true;
      // 注意需要对当前行数据进行深拷贝，否则会报错
      this.form = JSON.parse(JSON.stringify(row));
      // 清空表单的数据
      if (this.$refs.form != undefined) {
        this.$refs.form.resetFields();
      }
    },
    handleDelete(row) {
      // console.log(row);
      this.$confirm('此操作将永久删除该用户信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'waring'
      }).then(() => {
        delUser({ id: row.id }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功',
          })
          // 重新获取列表的接口
          this.getList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getList() {
      // 获取列表的数据
      getUser({ params: { ...this.userForm, ...this.pageData } }).then(({ data }) => {
        // console.log(data);
        this.tableData = data.list;
        this.total = data.count || 0;
        // console.log(this.total);
      })
    },
    handlePage(val) {
      this.pageData.page = val;
      this.getList();
    },
    // 列表的查询
    onSubmit() {
      console.log('Q');
      this.getList();
    },
    onChage(e) {
      // console.log(e == '');
      if (e == '') {
        this.getList();
      }
    }
  },
  mounted() {
    this.getList();
  },
}
</script>

<style lang="scss" scoped>
.user {
  height: 90%;
  position: relative;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-tabel {
    position: relative;
    height: calc(100% - 62px);
  }

  .pager {
    position: absolute;
    bottom: 50px;
    right: 40%;
  }
}
</style>